<!--
 * @Author: lirl
 * @Date: 2024-05-30 10:09:54
 * @Description: 流程融合起草列表
-->
<template>
  <div class="template-list">
    <div
      class="template"
      type="primary"
      v-for="item in list"
      :key="item.bizCompositeTypeCode"
      @click="handleClick(item)"
    >
      <span>{{ item.bizCompositeTypeName }}</span>
    </div>
  </div>
</template>

<script>
import { CompositeService } from 'jdf-jssdk';
import { bizServiceURL } from '@/api/utils/constants';
import routerJump from '@/api/utils/router-jump';

export default {
  data() {
    return {
      // 流程业务融合类型列表
      list: [],
    };
  },
  mounted() {
    this.getDraftedList();
  },
  methods: {
    /**
     * 获取流程模板列表
     */
    async getDraftedList() {
      const list = await new CompositeService(bizServiceURL).getTree();
      this.list = list ?? [];
    },
    /**
     * 点击业务融合类型，跳转到快速起草页面
     */
    handleClick(item) {
      routerJump.jumpToNewWindow('/process-composite-draft', {
        bizCompositeTypeCode: item.bizCompositeTypeCode,
        isInit: true,
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.template-list {
  padding: 20px;
  display:flex;
  flex-wrap: wrap;
  .template {
    color: #252525;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    margin-bottom: 15px;
    margin-right: 5px;
    position: relative;
    width: calc(25% - 5px);
    line-height: 20px;
    cursor: pointer;
    background-image: linear-gradient(0deg,#fff,#f3f5f8);
    border: 2px solid #fff;
    box-shadow: 8px 8px 20px 0 #cccccc47, -8px -8px 20px 0 #fff;
    border-radius: 4px;
    box-sizing: border-box;
    padding: 25px;
    &:hover {
      box-shadow: 8px 8px 20px 0 #cccccc, -8px -8px 20px 0 #fff;
    }
  }
}
</style>
